import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { Sidebar, Popup, PopupPosition } from 'react-vant';
import { useNavigate } from 'react-router-dom'
import './index.css'
interface dataType {
  code: number,
  name: string,
  children?: dataType[]
}
const Text: React.FC = () => {
  const [data, getData] = useState<dataType[]>([])
  const [active, setActive] = useState(0);
  const [state, setState] = useState<PopupPosition>('')
  const navigate = useNavigate()
  const onClose = () => setState('')
  const getDataAxios = async () => {
    const resp = await axios.get('/api/data')
    getData(resp.data.data)
  }
  const cityClick = (name: string) => {
    navigate(`/home${name}`)
  }
  useEffect(() => {
    getDataAxios()
  }, [])
  return (
    <div className='text'>
      <div>
        <Sidebar
          value={active}
          onChange={(v) => {
            setActive(v);
          }}
        >
          {
            data.map(v => {
              return <Sidebar.Item title={v.name} key={v.code} onClick={() => setState('right')} />
            })
          }
        </Sidebar>
      </div>
      <div>

        <Popup
          visible={state === 'right'}
          style={{ width: '50%', height: '100%' }}
          position='right'
          onClose={onClose}
        >
          <Sidebar>
            {
              data.length>0?data[active].children!.map(v=>{
                return <Sidebar.Item title={v.name} key={v.code} onClick={() => cityClick(v.name)} />
              }):<Sidebar.Item title={''} />
            }
          </Sidebar>
        </Popup>
      </div>
    </div>
  )
}

export default Text